<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../syntax_base/general-styles-of-descendant-components.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.1/umd/react.development.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      const { Component } = React;
      function $ajax({ cb, keyword }) {
        if (!keyword) {
          axios
            .get("http://127.0.0.1:8081/students")
            .then((res) => {
              cb(res.data);
            })
            .catch((error) => cb(error));
        } else {
          // console.log(!keyword);
          // console.log(!undefined);
          axios
            .get(`http://127.0.0.1:8081/studentById?id=${keyword}`)
            .then((res) => {
              cb(res.data);
            })
            .catch((error) => console.log("error"));
        }
      }
      class StudentInfo extends Component {
        state = { list: [] };
        componentDidMount() {
          this.refs.input.focus();
        }
        cb = (state) => {
          this.setState({
            list: state,
          });
        };
        getStudentList = () => {
          $ajax({ cb: this.cb });
        };
        search = (e) => {
          if (e.keyCode === 13) {
            $ajax({ cb: this.cb, keyword: e.target.value });
          }
        };
        render() {
          return (
            <div className="Parent">
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                <h3 style={{ margin: "0" }}>点击按钮获取学生数据</h3>
                <input
                  type="text"
                  placeholder="回车即可"
                  onKeyDown={this.search}
                  ref="input"
                />
                <button onClick={this.getStudentList}>getAjax</button>
              </div>
              <List list={this.state.list}></List>
            </div>
          );
        }
      }
      function List(props) {
        const { list } = props;
        return (
          <div className="Child">
            <ul>
              {list &&
                list.map((item) => {
                  return (
                    <li key={item.id}>
                      {item.name} - {item.age} -{item.id}
                    </li>
                  );
                })}
            </ul>
          </div>
        );
      }
      const App = (
        <div>
          <StudentInfo />
        </div>
      );
      ReactDOM.render(App, document.getElementById("root"));
    </script>
  </body>
</html>
